﻿
@{
    Layout = "~/Views/Shared/_TopMenu.cshtml";
    ViewBag.Title = "长月甜品-用户登录";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Login</title>
    <script>
        $(function () {
            $(function () {
                $(".main_menu_area .container ul li").eq(5).children().addClass("span")
                $(" .login-form a").click(function () {
                    $(this).css("color", "white").siblings().css("color", "#797979")
                })
            })
        })
    </script>
    <style>
        #Box {
            background: url('../../static/img/banner/personalBg.jpeg')no-repeat;
            background-size:cover;
            height:100vh;
            overflow:hidden;
        }

        #login-box {
            width: 600px;
            margin: 20vh 25vw;
            padding: 20px 0;
            background-color: rgb(255 255 255);
            box-shadow: #dedcdc 10px 10px initial;
            border-radius: 5px;
            text-align: center;
        }

        .login-form {
            margin: 20px 0px;
            font-weight: bold;
        }

            .login-form a:hover{
                color: black!important;
            }
  

        .login-account {
        }

        .form-email {
            display: none;
        }

        .xixanshi {
            display: block;
        }

        .yincang {
            display: none;
        }

        .btn-login {
            padding: 8px 25px;
        }
        .form-group {
            display:flex !important;
            width:80%;
            margin:0px auto;
        }
            .form-group label {
                line-height: 1.5;
                margin: 10px 0;
                color:black !important;
            }
            .form-group input[type=password],input[type=text] {
                width: 80%;
                vertical-align: middle;
                margin: 10px 0;
                background: rgb(0 0 0 / 0.00) !important;
            }
        .form-check {
            width:60%;
            margin:0px auto;
            display:flex;
            justify-content:flex-end;
        }
    </style>
</head>
<body>



    <section>
        <div id="Box">

            <div id="login-box" >
                <h4 style="color:#808080;">欢迎来到长月甜品,请登录</h4>
                <div class="login-form">
                    <a class="login-way login-account">账号登录</a>
                    <a class="login-email">邮箱登录</a>
                </div>
                @*账号登录*@
                <form class="form-account" method="post" action="/Cake/Login" >
                    <div class="form-group">
                        <label class="text-muted" >账号：</label>
                        <input type="text" class="form-control account" id="exampleInputEmail1" aria-describedby="emailHelp" name="Uaccount" style="width:80%;">
                        @*<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>*@
                    </div>
                    <div class="form-group">
                        <label class="text-muted">密码：</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" name="pwd">
                    </div>
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1" style="margin-right:80px;">
                        <label class="form-check-label text-muted" style="margin:0;">记住密码</label>
                    </div>
                    <button type="submit" class="btn btn-primary btn-login login-account">登录</button>
                </form>

                @*邮箱登录*@
                <form class="form-email" action="/Cake/loginPass" method="post">
                    <div class="form-group" >
                        <label class="text-muted">邮箱：</label>
                        <input type="text" class="form-control" id="code" aria-describedby="emailHelp" name="uemail" >
                    </div>
                    <div class="form-group" >
                        <label class="text-muted" style="width:80px;">验证码：</label>
                        <input type="text" class="form-control" id="code1" name="email_text" >
                        <span class="transmit" style="width:120px;margin-top:15px;">获取验证码</span>
                    </div>

                    <input type="submit" class="btn btn-primary btn-login le" value="登录" />
                </form>

                <div style="width:60%;margin:0px auto;text-align:center;">
                    <a href="/Cake/Register">没有账户？注册一个吧！</a>
                    <div>
                        <a href="/Admins/Login">管理员登录</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $(".login-email").click(function () {
                $(".login-email").addClass("login-way");
                $(".login-account").removeClass("login-way");


                $(".form-email").toggleClass("xixanshi")
                $(".form-account").toggleClass("yincang")
            })

            $(".login-account").click(function () {
                $(".login-account").addClass("login-way");
                $(".login-email").removeClass("login-way");


                $(".form-email").toggleClass("xixanshi")
                $(".form-account").toggleClass("yincang")
            })
        })
    </script>

    <script>
        $(function () {
            var code = "";
            $('.transmit').click(async function () {
                var email = $('#code').val();
                console.log(email)
                const { data: res } = await axios.post("/Cake/Login_Emali", { uemail: email });
                console.log(res);
                code = res;

            });
            

            $('.le').click(function () {
                var vcode = $('#code1').val();
                if ($('#code').val() == '') {
                    alert("邮箱不能为空");
                    return false;
                }
                if ($('#code1').val() == '') {
                    alert("验证码不能为空");
                    return false;
                }
                if (vcode != code) {
                    alert("验证码错误");
                    return false;
                }
            })
        })
    </script>
</body>
</html>
